<template>
  <CnvasBg />
  <div class="login-container">
    <el-card class="!border-none !bg-transparent !rounded-4% w-100 <sm:w-85">
      <div class="text-center relative">
        <h2>后台管理系统</h2>
      </div>
      <el-form
        :model="loginData"
        ref="loginFormRef"
        :rules="loginRules"
        class="login-form"
      >
        <!--账号-->
        <el-form-item prop="username">
          <div class="flex-y-center w-full">
            <el-icon class="mx-2"><User /></el-icon>
            <el-input
              v-model="loginData.username"
              placeholder="用户名"
              size="large"
              class="h-[48px]"
            />
          </div>
        </el-form-item>
        <!-- 密码-->
        <el-form-item prop="password">
          <div class="flex-y-center w-full">
            <el-icon class="mx-2"><Lock /></el-icon>
            <el-input
              v-model="loginData.password"
              type="password"
              placeholder="密码"
              show-password
              size="large"
              class="h-[48px] pr-2"
            />
          </div>
        </el-form-item>

        <el-form-item>
          <el-button
            type="primary"
            @click="submitForm(loginFormRef)"
            class="flex-y-center w-full"
            >登录</el-button
          >
        </el-form-item>
      </el-form>
      <ThirdLogin />
    </el-card>
    <!--    <Vcode-->
    <!--      :show="isShow"-->
    <!--      @success="success"-->
    <!--      @close="close"-->
    <!--      @fail="fail"-->
    <!--      :imgs="[Img]"-->
    <!--    />-->
    <div class="flex mt-4 text-sm">
      <div class="text-gray-300">还没有账户？</div>
      <div
        class="text-blue-800 cursor-pointer underline hover:decoration-solid"
        @click="router.push('/register')"
      >
        点击注册
      </div>
    </div>
  </div>
</template>

<script setup>
import ThirdLogin from "./components/thirdLogin/index.vue";
import CnvasBg from "./components/canvasBg/index.vue";
import Vcode from "vue3-puzzle-vcode";
import Img from "@/assets/images/crud.jpg";
import { loginApi } from "@/api/index.js";
import { useRoute } from "vue-router";
import router from "@/router";
const loginFormRef = ref();
// const isShow = ref(false);

const loginData = reactive({
  username: "sj-admin",
  password: "123456",
});
const loginRules = reactive({
  username: [
    {
      required: true,
      message: "请输入用户名",
      trigger: "blur",
    },
  ],
  password: [
    {
      required: true,
      message: "请输入密码",
      trigger: "blur",
    },
  ],
});
const route = useRoute();
const submitForm = async (formEl) => {
  if (!formEl) return;
  await formEl.validate(async (valid, fields) => {
    if (valid) {
      try {
        const res = await loginApi(loginData.username, loginData.password);
        const { tokenType, accessToken } = res.data;
        localStorage.setItem("token", accessToken); // Bearer eyJhbGciOiJIUzI1NiJ9.xxx.xxx
        const query = route.query;
        const redirect = query.redirect ?? "/";
        const otherQueryParams = Object.keys(query).reduce((acc, cur) => {
          if (cur !== "redirect") {
            acc[cur] = query[cur];
          }
          return acc;
        }, {});
        router.push({
          path: redirect,
          query: otherQueryParams,
        });
        ElNotification({
          title: "Success",
          message: "登录成功",
          type: "success",
        });
      } catch (err) {
        console.log("err", err);
      }
    } else {
      console.log("error submit!", fields);
    }
  });
};
// 通过验证
// const success = () => {
//   isShow.value = false;
//
// };
// // 用户点击遮罩层关闭模态框
// const close = () => {
//   console.log("滑块验证close");
//   isShow.value = false;
// };
// // 用户验证失败
// const fail = () => {
//   console.log("滑块验证fail");
// };
</script>

<style scoped lang="scss">
.login-container {
  overflow-y: auto;
  background: url("@/assets/images/login-bg.jpg") no-repeat center right;
  display: flex;
  flex-direction: column;
  @apply wh-full flex-center;
  .login-form {
    padding: 10px 10px;
  }
}

.el-form-item {
  background: var(--el-input-bg-color);
  border: 1px solid var(--el-border-color);
  border-radius: 5px;
}
:deep(.el-input) {
  .el-input__wrapper {
    padding: 0;
    background-color: transparent;
    box-shadow: none;

    &.is-focus,
    &:hover {
      box-shadow: none !important;
    }

    input:-webkit-autofill {
      /* 通过延时渲染背景色变相去除背景颜色 */
      transition: background-color 1000s ease-in-out 0s;
    }
  }
}
:deep(.el-card__body) {
  background-color: white;
}
</style>
